import QtQuick 2.0

Rectangle{
    width: 360; height: 240
    color: "#eeeeee"
    id: rootItem

    Text {
        id: linkText
        text: qsTr("I\'m a web link")
        anchors.centerIn: parent
        font.pixelSize: 24
        property bool hadClicked: false
        MouseArea{
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                linkText.state = linkText.hadClicked ? "clickedHover" : "hover";
            }
            onExited: {
                linkText.state = linkText.hadClicked ? "clicked" : "initial";
            }
            onClicked: {
                if (linkText.hadClicked == false)
                    linkText.hadClicked = true;
                linkText.state = "clicked";
            }
        }

        states: [
            State {
                name: "initial";
                changes: [
                    PropertyChanges{ target: linkText; color: "blue"}
                ]
            },
            State{
                name: "hover"
                PropertyChanges{
                    target: linkText
                    color: "#87cefa"
                    font.italic: true; font.pixelSize: 36
                    font.underline: true
                }
            },
            State{
                name: "clicked"
                PropertyChanges{
                    target: linkText
                    color: "#8b4513"
                    font.pixelSize:  24;
                }
            },
            State{
                name: "clickedHover"
                PropertyChanges{
                    target: linkText
                    color: "#d2691e"
                    font.italic: true;
                    font.pixelSize: 36;
                    font.underline: true;
                }
            }

        ]

        state: "initial";

        transitions: [
            Transition{
                from: "initial"; to: "hover";
                reversible: true
                NumberAnimation { property: "font.pixelSize"; duration: 800}
                ColorAnimation { duration: 800 }
            },
            Transition{
                from: "hover"; to: "clicked"
                NumberAnimation { property: "font.pixelSize"; duration: 800}
                ColorAnimation { duration: 800; }
            },
            Transition{
                from: "clicked"; to: "clickedHover"
                reversible: true;
                SequentialAnimation{
                    NumberAnimation{
                        property: "font.pixelSize"
                        duration: 800
                    }
                    ColorAnimation { duration: 800}
                }
            }
        ]
    }
}

